<template>
  <div class="advanced-menu-container">
    <!-- 数字雨背景层 -->
    <div class="digital-rain-container" ref="digitalRainContainer"></div>
    
    <!-- 黑客风格的终端顶部栏 -->
    <div class="terminal-header">
      <div class="terminal-buttons">
        <div class="button red"></div>
        <div class="button yellow"></div>
        <div class="button green"></div>
      </div>
      <div class="terminal-title">系统模块</div>
      <div class="system-status">
        <span class="status-indicator online" title="系统状态: 在线">在线</span>
      </div>
      <div class="menu-toggle" @click="toggleMenu" :class="{ 'toggled': !isMenuOpen }">
        <el-icon class="toggle-icon"><Fold v-if="isMenuOpen" /><Unfold v-else /></el-icon>
      </div>
    </div>
    
    <el-menu
      :default-active="currentRoute"
      class="advanced-menu hacker-menu"
      :collapse="!isMenuOpen"
      :collapse-transition="true"
      router
      :unique-opened="uniqueOpened"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 系统保留菜单组 -->
      <el-sub-menu index="system">
        <template #title>
          <el-icon class="hacker-icon"><Platform /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">系统保留</span>
        </template>
        <el-menu-item index="/home" :class="getMenuItemClass('/home')">
          <el-icon class="hacker-icon"><Promotion /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">首页</span>
        </el-menu-item>
        <el-menu-item index="/about" :class="getMenuItemClass('/about')">
          <el-icon class="hacker-icon"><StarFilled /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">关于</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 管理菜单组 -->
      <el-sub-menu index="management">
        <template #title>
          <el-icon class="hacker-icon"><User /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">管理</span>
        </template>
        <el-menu-item index="/permissionlist" :class="getMenuItemClass('/permissionlist')">
          <el-icon class="hacker-icon"><Management /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">权限管理</span>
        </el-menu-item>
        <el-menu-item index="/userlist" :class="getMenuItemClass('/userlist')">
          <el-icon class="hacker-icon"><HelpFilled /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/rolelist" :class="getMenuItemClass('/rolelist')">
          <el-icon class="hacker-icon"><Checked /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">角色管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 数据可视化菜单组 -->
      <el-sub-menu index="visualization">
        <template #title>
          <el-icon class="hacker-icon"><Histogram /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">数据可视化</span>
        </template>
        <el-menu-item index="/dashboard" :class="getMenuItemClass('/dashboard')">
          <el-icon class="hacker-icon"><TrendCharts /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">数据概览</span>
        </el-menu-item>
        <el-menu-item index="/reports" :class="getMenuItemClass('/reports')">
          <el-icon class="hacker-icon"><Document /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">报表中心</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 系统设置菜单组 -->
      <el-sub-menu index="settings">
        <template #title>
          <el-icon class="hacker-icon"><Setting /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">系统设置</span>
        </template>
        <el-menu-item index="/preferences" :class="getMenuItemClass('/preferences')">
          <el-icon class="hacker-icon"><Tools /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">偏好设置</span>
        </el-menu-item>
        <el-menu-item index="/logs" :class="getMenuItemClass('/logs')">
          <el-icon class="hacker-icon"><MessageFilled /></el-icon>
          <span v-if="isMenuOpen" class="menu-text">系统日志</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    
    <!-- 系统日志浮动面板 -->
    <div class="floating-log-panel" v-if="showLogPanel">
      <div class="log-panel-header">
        <div class="log-title">系统日志</div>
        <button class="close-log" @click="showLogPanel = false">[X]</button>
      </div>
      <div class="log-panel-content">
        <div v-for="(log, index) in systemLogs" :key="index" class="log-entry">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-level" :class="log.level">[{{ log.level }}]</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
        <div v-if="systemLogs.length === 0" class="empty-log">暂无日志</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Fold,

  Platform,
  Promotion,
  StarFilled,
  User,
  Management,
  HelpFilled,
  Checked,
  Setting,
  Histogram,
  TrendCharts,
  Document,
  Tools,
 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 系统日志类型
interface SystemLog {
  time: string;
  level: 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS';
  message: string;
}

// 响应式状态
const isMenuOpen = ref(true)
const uniqueOpened = ref(true)
const openMenus = ref<string[]>([])
const router = useRouter()
const route = useRoute()
const systemLogs = ref<SystemLog[]>([])
const showLogPanel = ref(false)
const digitalRainContainer = ref<HTMLDivElement>()
const connectionCount = ref<number>(0)
const startTime = ref<number>(Date.now())
const runningTime = ref<string>('')

// 计算当前路由
const currentRoute = computed(() => route.path)

// 添加系统日志
const addSystemLog = (level: 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS', message: string) => {
  const now = new Date();
  const timeString = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  
  systemLogs.value.unshift({ time: timeString, level, message });
  
  // 保持日志数量在合理范围内
  if (systemLogs.value.length > 100) {
    systemLogs.value.pop();
  }
  
  // 自动显示日志面板2秒
  showLogPanel.value = true;
  setTimeout(() => {
    if (systemLogs.value.length > 0) {
      showLogPanel.value = false;
    }
  }, 2000);
  
  // 同时输出到控制台（开发模式下）
  const consoleMethod = {
    'INFO': console.info,
    'WARNING': console.warn,
    'ERROR': console.error,
    'SUCCESS': console.log
  }[level];
  consoleMethod(`[${timeString}] [${level}] ${message}`);
};

// 生成随机连接数
const generateConnectionCount = () => {
  connectionCount.value = Math.floor(Math.random() * 20) + 1;
  addSystemLog('INFO', `Connection count updated: ${connectionCount.value}`);
};

// 更新运行时间
const updateRunningTime = () => {
  const currentTime = Date.now();
  const elapsedTime = Math.floor((currentTime - startTime.value) / 1000);
  const hours = Math.floor(elapsedTime / 3600);
  const minutes = Math.floor((elapsedTime % 3600) / 60);
  const seconds = elapsedTime % 60;
  
  runningTime.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

// 初始化数字雨效果
const initDigitalRain = () => {
  if (!digitalRainContainer.value) return;
  
  const container = digitalRainContainer.value;
  const width = container.clientWidth;
  const height = container.clientHeight;
  
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  container.innerHTML = '';
  container.appendChild(canvas);
  
  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  
  // 设置中文字符集
  const chars = '系统菜单管理用户角色权限数据安全设置可视化报表'.split('');
  const fontSize = 14;
  const columns = Math.floor(width / fontSize);
  
  // 每个列的起始位置
  const drops: number[] = [];
  for (let i = 0; i < columns; i++) {
    drops[i] = Math.floor(Math.random() * -100);
  }
  
  // 数字雨动画
  const draw = () => {
    ctx.fillStyle = 'rgba(0, 20, 0, 0.05)';
    ctx.fillRect(0, 0, width, height);
    
    ctx.fillStyle = '#0f0';
    ctx.font = `${fontSize}px monospace`;
    
    for (let i = 0; i < drops.length; i++) {
      const text = chars[Math.floor(Math.random() * chars.length)];
      ctx.fillText(text, i * fontSize, drops[i] * fontSize);
      
      // 随机透明度，创建深度感
      const opacity = 0.5 + Math.random() * 0.5;
      ctx.fillStyle = `rgba(0, 255, 65, ${opacity})`;
      
      // 随机改变字符颜色
      if (Math.random() > 0.99) {
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
      } else if (Math.random() > 0.95) {
        ctx.fillStyle = `rgba(0, 255, 255, ${opacity})`;
      }
      
      // 当字符到底部或随机重置
      if (drops[i] * fontSize > height && Math.random() > 0.975) {
        drops[i] = 0;
      }
      
      drops[i]++;
    }
  };
  
  // 每33毫秒更新一帧
  const interval = setInterval(draw, 33);
  
  // 在组件卸载时清除interval
  onUnmounted(() => clearInterval(interval));
};

// 切换菜单展开/折叠状态
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
  // 保存菜单状态到localStorage
  localStorage.setItem('menuCollapsed', JSON.stringify(!isMenuOpen.value));
  
  addSystemLog('INFO', `Menu toggled: ${isMenuOpen.value ? 'EXPANDED' : 'COLLAPSED'}`);
};

// 处理菜单打开事件
const handleOpen = (key: string, keyPath: string[]) => {
  // 记录打开的菜单
  openMenus.value = keyPath;
  // 保存打开状态
  localStorage.setItem('openMenus', JSON.stringify(openMenus.value));
  
  addSystemLog('INFO', `Menu opened: ${key}`);
};

// 处理菜单关闭事件
const handleClose = (key: string, keyPath: string[]) => {
  // 更新打开的菜单
  openMenus.value = keyPath;
  // 保存打开状态
  localStorage.setItem('openMenus', JSON.stringify(openMenus.value));
  
  addSystemLog('INFO', `Menu closed: ${key}`);
};

// 获取菜单项的样式类
const getMenuItemClass = (path: string) => {
  return {
    'menu-item-active': currentRoute.value === path,
    'menu-item-hover': false // 留作未来扩展
  };
};

// 滚动到当前激活的菜单项
const scrollToActiveItem = () => {
  const activeItem = document.querySelector('.menu-item-active');
  if (activeItem) {
    const menuContainer = activeItem.closest('.advanced-menu');
    if (menuContainer) {
      // 计算滚动位置
      const menuRect = menuContainer.getBoundingClientRect();
      const itemRect = activeItem.getBoundingClientRect();
      
      if (itemRect.top < menuRect.top || itemRect.bottom > menuRect.bottom) {
        activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
  }
};

// 检查权限
const checkPermission = (path: string): boolean => {
  // 这里可以根据用户权限返回是否显示某个菜单项
  // 目前默认返回true
  return true;
};

// 生命周期钩子
onMounted(() => {
  // 黑客风格的系统启动日志
  addSystemLog('SUCCESS', 'AdvancedMenu v2.0.0 initialized');
  addSystemLog('INFO', 'Loading user preferences...');
  
  // 加载菜单折叠状态
  const collapsed = localStorage.getItem('menuCollapsed');
  if (collapsed) {
    isMenuOpen.value = !JSON.parse(collapsed);
    addSystemLog('INFO', `Menu state loaded: ${isMenuOpen.value ? 'EXPANDED' : 'COLLAPSED'}`);
  }
  
  // 加载打开的菜单状态
  const savedOpenMenus = localStorage.getItem('openMenus');
  if (savedOpenMenus) {
    try {
      openMenus.value = JSON.parse(savedOpenMenus);
      addSystemLog('INFO', `Open menus restored: ${openMenus.value.join(', ')}`);
      // 这里可以根据保存的状态打开相应的菜单
    } catch (e) {
      addSystemLog('ERROR', `Failed to parse saved open menus: ${e}`);
      console.error('[ERROR] Failed to parse saved open menus:', e);
    }
  }
  
  // 监听路由变化，滚动到当前激活的菜单项
  const routeChangeHandler = () => {
    setTimeout(scrollToActiveItem, 100);
    addSystemLog('INFO', `Current path: ${currentRoute.value}`);
  };
  
  router.afterEach(routeChangeHandler);
  
  // 初始滚动到当前激活项
  scrollToActiveItem();
  
  // 响应式处理
  const handleResize = () => {
    if (window.innerWidth < 1024 && isMenuOpen.value) {
      isMenuOpen.value = false;
      localStorage.setItem('menuCollapsed', 'true');
      addSystemLog('INFO', 'Menu auto-collapsed due to screen size');
    }
  };
  
  window.addEventListener('resize', handleResize);
  
  // 初始化数字雨
  initDigitalRain();
  
  // 监听窗口大小变化，重新调整数字雨
  const resizeHandler = () => {
    if (digitalRainContainer.value) {
      initDigitalRain();
    }
  };
  window.addEventListener('resize', resizeHandler);
  
  // 生成连接数
  generateConnectionCount();
  
  // 每秒更新一次运行时间
  const runningTimeInterval = setInterval(updateRunningTime, 1000);
  
  // 每10秒更新一次连接数
  const connectionInterval = setInterval(generateConnectionCount, 10000);
  
  // 清理函数
  onUnmounted(() => {
    router.afterEach(() => {});
    window.removeEventListener('resize', handleResize);
    window.removeEventListener('resize', resizeHandler);
    clearInterval(runningTimeInterval);
    clearInterval(connectionInterval);
    addSystemLog('INFO', 'AdvancedMenu terminated');
  });
});

// 监听路由变化
watch(() => route.path, (newPath) => {
  addSystemLog('INFO', `Route changed to: ${newPath}`);
  
  // 模拟安全检查
  if (Math.random() > 0.7) {
    addSystemLog('WARNING', `Security scan triggered for path: ${newPath}`);
  }
});

// 添加键盘快捷键支持（黑客风格）
onMounted(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    // Ctrl/Cmd + M 切换菜单
    if ((e.ctrlKey || e.metaKey) && e.key === 'm') {
      e.preventDefault();
      toggleMenu();
    }
    
    // Ctrl/Cmd + L 显示/隐藏日志
    if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
      e.preventDefault();
      showLogPanel.value = !showLogPanel.value;
      addSystemLog('INFO', `Log panel ${showLogPanel.value ? 'shown' : 'hidden'}`);
    }
  };
  
  window.addEventListener('keydown', handleKeyDown);
  
  onUnmounted(() => {
    window.removeEventListener('keydown', handleKeyDown);
  });
});
</script>

<style scoped>
/* 基础容器样式 */
.advanced-menu-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--hacker-panel-dark);
  overflow: hidden;
  border-right: 1px solid var(--hacker-border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
}

/* 数字雨背景 */
.digital-rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
  pointer-events: none;
}

/* 黑客风格终端顶部栏 */
.terminal-header {
  height: 28px;
  background-color: var(--hacker-panel);
  border-bottom: 1px solid var(--hacker-border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 终端窗口按钮 */
.terminal-buttons {
  display: flex;
  gap: 6px;
  margin-right: 10px;
}

.terminal-buttons .button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.terminal-buttons .button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.terminal-buttons .button.red {
  background-color: #ff5f56;
  box-shadow: 0 0 3px rgba(255, 95, 86, 0.5);
}

.terminal-buttons .button.yellow {
  background-color: #ffbd2e;
  box-shadow: 0 0 3px rgba(255, 189, 46, 0.5);
}

.terminal-buttons .button.green {
  background-color: #27c93f;
  box-shadow: 0 0 3px rgba(39, 201, 63, 0.5);
}

/* 终端标题 */
.terminal-title {
  flex: 1;
  color: var(--hacker-green);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 3px var(--hacker-green-glow);
  animation: title-flicker 5s infinite;
}

/* 系统状态指示器 */
.system-status {
  margin-right: 10px;
}

.status-indicator {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.status-indicator.online {
  background-color: rgba(0, 255, 0, 0.2);
  color: var(--hacker-green);
  border: 1px solid var(--hacker-green);
  box-shadow: 0 0 3px var(--hacker-green-glow);
  animation: pulse 2s infinite;
}

/* 菜单切换按钮 */
.menu-toggle {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  z-index: 10;
  background-color: var(--hacker-panel);
  color: var(--hacker-green);
  width: 30px;
  height: 60px;
  border: 1px solid var(--hacker-border);
  border-left: none;
  border-radius: 0 15px 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background-color: var(--hacker-panel-light);
  box-shadow: 2px 0 8px var(--hacker-green-glow);
  border-color: var(--hacker-blue);
}

.menu-toggle.toggled {
  right: calc(100% - 15px);
  border-radius: 15px 0 0 15px;
  border-right: none;
  border-left: 1px solid var(--hacker-border);
}

.toggle-icon {
  font-size: 16px;
  color: var(--hacker-green);
  text-shadow: 0 0 5px var(--hacker-green-glow);
}

/* 菜单主体样式 */
.advanced-menu {
  flex: 1;
  width: 240px;
  background-color: var(--hacker-panel-dark);
  color: var(--hacker-text);
  transition: all 0.3s ease;
  overflow-y: auto;
  border-right: none;
  /* 黑客风格网格背景 */
  background-image: 
    linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 15px 15px;
}

/* 黑客菜单特有样式 */
.hacker-menu {
  --el-menu-bg-color: transparent !important;
  --el-menu-hover-bg-color: var(--hacker-hover) !important;
  --el-menu-text-color: var(--hacker-text) !important;
  --el-menu-active-color: var(--hacker-green) !important;
  --el-menu-border-color: transparent !important;
}

.advanced-menu:not(.el-menu--collapse) {
  width: 240px;
}

.advanced-menu.el-menu--collapse {
  width: 64px;
}

/* 图标样式 */
.hacker-icon {
  color: var(--hacker-green);
  font-size: 16px;
  text-shadow: 0 0 3px var(--hacker-green-glow);
  transition: all 0.3s ease;
}

.el-menu-item:hover .hacker-icon,
.el-sub-menu__title:hover .hacker-icon {
  color: var(--hacker-blue);
  text-shadow: 0 0 6px var(--hacker-blue);
  transform: scale(1.1);
}

/* 文本样式 */
.menu-text {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 0 2px var(--hacker-green-glow);
  position: relative;
  display: inline-block;
}

.menu-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: var(--hacker-green);
  transition: width 0.3s ease;
}

.el-menu-item:hover .menu-text::after,
.el-sub-menu__title:hover .menu-text::after {
  width: 100%;
  box-shadow: 0 0 3px var(--hacker-green-glow);
}

/* 自定义滚动条样式 */
.advanced-menu::-webkit-scrollbar {
  width: 8px;
}

.advanced-menu::-webkit-scrollbar-track {
  background: var(--hacker-panel-dark);
  border-left: 1px solid var(--hacker-border);
}

.advanced-menu::-webkit-scrollbar-thumb {
  background: var(--hacker-green-dark);
  border: 1px solid var(--hacker-green-glow);
  border-radius: 0;
  transition: all 0.3s ease;
}

.advanced-menu::-webkit-scrollbar-thumb:hover {
  background: var(--hacker-green);
  box-shadow: 0 0 8px var(--hacker-green-glow);
}

/* 菜单子项样式 */
.el-menu-item {
  position: relative;
  transition: all 0.3s ease;
  padding-left: 20px !important;
  background: transparent !important;
  border-left: 2px solid transparent;
  overflow: hidden;
}

.el-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--hacker-green), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.el-menu-item:hover {
  background-color: var(--hacker-hover) !important;
  color: var(--hacker-green) !important;
  border-left-color: var(--hacker-green) !important;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1);
}

.el-menu-item:hover::before {
  transform: translateX(0);
}

.menu-item-active {
  background-color: var(--hacker-active) !important;
  color: var(--hacker-green) !important;
  border-left-color: var(--hacker-green) !important;
  box-shadow: inset 0 0 15px rgba(0, 255, 65, 0.2);
}

.menu-item-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--hacker-green);
  box-shadow: 0 0 8px var(--hacker-green-glow);
  transform: translateX(0);
}

/* 子菜单标题样式 */
.el-sub-menu .el-sub-menu__title {
  padding-left: 20px !important;
  transition: all 0.3s ease;
  background: transparent !important;
  border-left: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.el-sub-menu .el-sub-menu__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--hacker-green), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.el-sub-menu .el-sub-menu__title:hover {
  background-color: var(--hacker-hover) !important;
  color: var(--hacker-green) !important;
  border-left-color: var(--hacker-green) !important;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1);
}

.el-sub-menu .el-sub-menu__title:hover::before {
  transform: translateX(0);
}

/* 动画效果 */
.el-menu--collapse .el-menu .el-sub-menu {
  min-width: 240px;
  background-color: var(--hacker-panel-dark) !important;
  border: 1px solid var(--hacker-border);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: subMenuExpand 0.3s ease;
}

/* 展开/折叠动画 */
.el-menu--collapse-transition {
  transition: width 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

/* 浮动日志面板样式 */
.floating-log-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  max-height: 300px;
  background-color: var(--hacker-panel-dark);
  border: 1px solid var(--hacker-border);
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
  z-index: 1000;
  animation: logPanelSlideIn 0.3s ease;
}

.log-panel-header {
  background-color: var(--hacker-panel);
  padding: 8px 12px;
  border-bottom: 1px solid var(--hacker-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-title {
  color: var(--hacker-green);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.close-log {
  background: none;
  border: none;
  color: var(--hacker-green);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.close-log:hover {
  color: var(--hacker-red);
  transform: scale(1.1);
}

.log-panel-content {
  padding: 10px;
  max-height: 250px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.log-entry {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.log-time {
  color: #555;
  min-width: 70px;
}

.log-level {
  min-width: 60px;
  text-align: center;
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 10px;
  text-transform: uppercase;
}

.log-level.INFO {
  color: var(--hacker-blue);
  background-color: rgba(0, 255, 255, 0.1);
  border: 1px solid var(--hacker-blue);
}

.log-level.WARNING {
  color: #ffbd2e;
  background-color: rgba(255, 189, 46, 0.1);
  border: 1px solid #ffbd2e;
}

.log-level.ERROR {
  color: var(--hacker-red);
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid var(--hacker-red);
}

.log-level.SUCCESS {
  color: var(--hacker-green);
  background-color: rgba(0, 255, 0, 0.1);
  border: 1px solid var(--hacker-green);
}

.log-message {
  color: var(--hacker-text);
  flex: 1;
  word-break: break-all;
}

.empty-log {
  text-align: center;
  color: #555;
  font-style: italic;
  padding: 20px 0;
}

/* 日志面板滚动条 */
.log-panel-content::-webkit-scrollbar {
  width: 6px;
}

.log-panel-content::-webkit-scrollbar-track {
  background: var(--hacker-panel-dark);
  border-radius: 3px;
}

.log-panel-content::-webkit-scrollbar-thumb {
  background: var(--hacker-green-dark);
  border-radius: 3px;
  border: 1px solid var(--hacker-green-glow);
}

.log-panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--hacker-green);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .advanced-menu {
    width: 64px;
  }
  
  .advanced-menu-container:not(.collapsed) .advanced-menu {
    width: 64px;
  }
  
  .menu-toggle {
    right: calc(100% - 15px);
    border-radius: 15px 0 0 15px;
    border-right: none;
    border-left: 1px solid var(--hacker-border);
  }
  
  .menu-toggle.toggled {
    right: -15px;
    border-radius: 0 15px 15px 0;
    border-left: none;
    border-right: 1px solid var(--hacker-border);
  }
  
  .floating-log-panel {
    width: 300px;
    bottom: 10px;
    right: 10px;
  }
}

@media (max-width: 768px) {
  .advanced-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .advanced-menu-container.open {
    transform: translateX(0);
  }
  
  .advanced-menu {
    transform: none;
  }
  
  .menu-toggle {
    right: -30px;
    top: 20px;
    height: 40px;
    border-radius: 0 8px 8px 0;
  }
  
  .floating-log-panel {
    width: calc(100vw - 40px);
    max-height: 200px;
  }
}

/* 动画定义 */
@keyframes matrixCode {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0);
  }
}

@keyframes title-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 0 0 3px var(--hacker-green-glow);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.7;
    text-shadow: 0 0 1px var(--hacker-green-glow);
  }
}

@keyframes subMenuExpand {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes logPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 交互效果增强 */
.menu-item-active:hover {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 选中项高亮 */
.el-menu-item.is-active {
  color: var(--hacker-blue) !important;
  font-weight: bold;
}

/* 菜单组标题样式 */
.el-sub-menu__title {
  position: relative;
}

.el-sub-menu__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--hacker-green), transparent);
  opacity: 0.5;
}

/* 键盘焦点样式 */
.el-menu-item:focus,
.el-sub-menu__title:focus {
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.3);
}
</style>